<template>
<div class="app-main">
  <div>
    <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="85px">
      <el-form-item label="宠物种类" prop="type">
        <el-select v-model="queryForm.type" clearable placeholder="请选择宠物种类">
          <el-option v-for="item in petTypeArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryData">查询</el-button>
        <el-button @click="resetForm('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="pet-container">
    <div v-for="item in petsList" :key="item.id" class="pet-item">
      <el-card :body-style="{ padding: '0px' }" shadow="hover">
        <img :src="'/api' + item.image" class="image">
        <div class="item-container">
          <div class="item-info">
            <div><span class="label-title">宠物种类：</span>{{ typeRender(item.type) }}</div>
            <div><span class="label-title">宠物年龄：</span>{{ item.age }} 岁</div>
          </div>
          <div class="item-info-second">
            <div><span class="label-title">宠物价格：</span>{{ item.price }} 元</div>
            <div><span class="label-title">库存数量：</span>{{ item.stock }} 只</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</div>
</template>

<script>
import {getPet} from "@/api/pet";
export default {
  name: "index",
  data() {
    return {
      petsList: [],
      petTypeArr: [
        {'label': '猫', 'value': '1'},
        {'label': '狗', 'value': '2'},
        {'label': '仓鼠', 'value': '3'},
        {'label': '小猪', 'value': '4'},
        {'label': '兔子', 'value': '5'},
        {'label': '羊驼', 'value': '6'},
        {'label': '鹦鹉', 'value': '7'},
        {'label': '鸽子', 'value': '8'},
        {'label': '乌龟', 'value': '9'},
        {'label': '蝈蝈', 'value': '10'},
        {'label': '金鱼', 'value': '11'},
        {'label': '桑蚕', 'value': '12'},
      ],
      queryForm: {
        type: ''
      }
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    typeRender(data) {
      for(let i=0; i<this.petTypeArr.length; i++) {
        if(data === this.petTypeArr[i].value) {
          return this.petTypeArr[i].label
        }
      }
    },
    queryData() {
      let params = {
        type: this.queryForm.type,
        pageNo: 1,
        pageSize: 1000
      }
      getPet(params).then(response => {
        if(response.code === 200) {
          this.petsList = response.data.list
        } else {
          this.$message.error(response.msg);
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.queryData()
    },
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px;
  box-sizing: border-box;
  .pet-container {
    display: flex;
    flex-wrap: wrap;
    .pet-item {
      padding: 10px 15px;
      width: 348px;
      height: 320px;
      .image {
        width: 348px;
        height: 240px;
        display: block;
      }
      .item-container {
        padding: 14px;
        .item-info {
          display: flex;
          justify-content: space-between;
          .label-title {
            color: #909399;
          }
        }
        .item-info-second {
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          .label-title {
            color: #909399;
          }
        }
      }
    }
  }
}
</style>
